<!DOCTYPE html>
<html lang="en">

<head>
    <title>My BCIT Project</title>
    <meta name="comp2800 template" content="My 2800 App">
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="styles/Map.css">
    <script src="scripts/checklogin.js"></script>
    <!-- Bootstrap Library CSS JS CDN go here -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/bcryptjs/2.4.3/bcrypt.min.js"></script>
    <link href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/css/bootstrap.min.css" rel="stylesheet"  crossorigin="anonymous">
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/5.3.3/js/bootstrap.js"  crossorigin="anonymous"></script>

    <!-- Firebase 8 Library related CSS, JS, JQuery go here -->
    <script src="//cdn.bootcss.com/jquery/3.7.1/jquery.min.js"></script>
    <!-- Font Awesome -->
    <!-- Other libraries and styles of your own -->
    <!-- <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"> -->
    <!-- <link rel="stylesheet" href="./styles/style.css"> -->
</head>

<body>
    <!-- our own navbar goes here -->
    <nav id="navbarPlaceholder"></nav>

    <div class="container">
        <!-- 主推文章 -->
        <div class="featured-post">
            <h1 class="display-4 mb-4" style="font-size: 2.5rem;">Welcome to use the map function of Heart of Food software.</h1>
            <!-- 左侧度假图片 -->
            <img src="images/Tupian1.png" alt="" 
                 style="width: 800px; border-radius: 15px; vertical-align: bottom;">
            <!-- 右侧地图容器 -->
            <div style="display: inline-block; position: relative; margin-left: 20px;">
                <!-- 按钮组定位在地图顶部 -->
                <div style="position: absolute; top: 40px; right: 70px; z-index: 1;">
                    <button class="btn btn-info rounded-pill px-3" type="button">flavors</button>
                    <button class="btn btn-light rounded-pill px-3" type="button">price</button>
                    <button class="btn btn-dark rounded-pill px-3" type="button">rating</button>
                </div>
                <!-- 右侧地图图片 -->
                <img src="images/Tupian2.png" alt="Related restaurants nearby"
                     style="width: 470px; border-radius: 10px; display: block;">
            </div>
        </div>
    </div>

    <div class="container py-5">
        <h1 class="mb-4">Featured Restaurants</h1>
        <div class="row">
            <!-- 餐厅卡片模板 -->
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="restaurant-card">
                    <div class="d-flex align-items-center">
                        <img src="images/ShaoEr.png" class="card-img-top" alt="Restaurant" style="max-width: 50px; border-radius: 12px 12px 0 0;">
                        <div class="rating-icons ms-3">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title mb-3">The Bull Devil's Roast Goose</h5>
                        <!-- 评分区域 -->
                        <div class="d-flex align-items-center mb-3">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="ms-2">4.5/5 (356 reviews)</span>
                        </div>
                        <!-- 特色菜品 -->
                        <div class="mb-4">
                            <h6 class="text-muted">Specialty Dishes:</h6>
                            <ul class="specialty-list">
                                <li>Roasted Goose Rice Noodles</li>
                                <li>Goose Leg Rice Noodle</li>
                                <li>Whole Roasted Goose</li>
                            </ul>
                        </div>
                        <!-- 微型地图 -->
                        <div class="map-container" style="position: relative; border-radius: 8px; overflow: hidden; margin: 15px 0;">
                            <img src="images/NiuMoWang.png" 
                                 alt="餐厅周边地图"
                                 style="width: 100%;
                                        height: auto;
                                        max-width: 480px;
                                        border: 1px solid #eee;
                                        border-radius: 8px;
                                        box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <!-- 地图标注层 -->
                            <div style="position: absolute; 
                                        top: 15%; 
                                        left: 10%;
                                        pointer-events: none;">
                                <div class="map-marker" style="background: rgba(255,165,0,0.9); 
                                                              color: white;
                                                              padding: 8px 12px;
                                                              border-radius: 20px;
                                                              font-size: 0.9rem;
                                                              margin-bottom: 8px;">
                                    🏮 The Bull Devil's Roast Goose
                                </div>
                                <div class="map-marker" style="background: rgba(106,90,205,0.9); 
                                                              color: white;
                                                              padding: 6px 10px;
                                                              border-radius: 15px;
                                                              font-size: 0.8rem;">
                                    📍 下高田工业路 & 莞长路交叉口
                                </div>
                            </div>
                        </div>
                        <!-- 组 -->
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-outline-dark btn-sm">
                                <i class="fas fa-info"></i> Details
                            </button>
                            <button class="btn btn-primary btn-sm" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#reviewModal">
                                <i class="fas fa-pen"></i> Write Review
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="restaurant-card">
                    <div class="d-flex align-items-center">
                        <img src="images/Laomian.png" class="card-img-top" alt="Restaurant" style="max-width: 50px; border-radius: 12px 12px 0 0;">
                        <div class="rating-icons ms-3">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title mb-3">He Fu Lo mein</h5>
                        <!-- 评分区域 -->
                        <div class="d-flex align-items-center mb-3">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                            </div>
                            <span class="ms-2">4/5 (572 reviews)</span>
                        </div>
                        <!-- 特色菜品 -->
                        <div class="mb-4">
                            <h6 class="text-muted">Specialty Dishes:</h6>
                            <ul class="specialty-list">
                                <li>Herbal pork bone soup + Snow Pork (pork) noodles</li>
                                <li>Herbal hot and sour soup noodles</li>
                                <li>Chongqing Qiaotou fat sausage noodles</li>
                            </ul>
                        </div>
                        <!-- 微型地图 -->
                        <div class="map-container" style="position: relative; border-radius: 8px; overflow: hidden; margin: 15px 0;">
                            <img src="images/Hefulaomian.png" 
                                 alt="餐厅周边地图"
                                 style="width: 100%;
                                        height: auto;
                                        max-width: 480px;
                                        border: 1px solid #eee;
                                        border-radius: 8px;
                                        box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <!-- 地图标注层 -->
                            <div style="position: absolute; 
                                        top: 15%; 
                                        left: 10%;
                                        pointer-events: none;">
                                <div class="map-marker" style="background: rgba(255,165,0,0.9); 
                                                              color: white;
                                                              padding: 8px 12px;
                                                              border-radius: 20px;
                                                              font-size: 0.9rem;
                                                              margin-bottom: 8px;">
                                    🏮 He Fu Lo mein
                                </div>
                                <div class="map-marker" style="background: rgba(106,90,205,0.9); 
                                                              color: white;
                                                              padding: 6px 10px;
                                                              border-radius: 15px;
                                                              font-size: 0.8rem;">
                                    📍 迎宾路 & 新城路交汇处十字路口西侧西南方向120米
                                </div>
                            </div>
                        </div>
                        <!-- 组 -->
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-outline-dark btn-sm">
                                <i class="fas fa-info"></i> Details
                            </button>
                            <button class="btn btn-primary btn-sm" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#reviewModal">
                                <i class="fas fa-pen"></i> Write Review
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-lg-4 col-md-6 col-sm-12">
                <div class="restaurant-card">
                    <div class="d-flex align-items-center">
                        <img src="images/Kaorou.png" class="card-img-top" alt="Restaurant" style="max-width: 50px; border-radius: 12px 12px 0 0;">
                        <div class="rating-icons ms-3">
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star"></i>
                            <i class="fas fa-star-half-alt"></i>
                        </div>
                    </div>
                    <div class="card-body">
                        <h5 class="card-title mb-3">Korean barbecue</h5>
                        <!-- 评分区域 -->
                        <div class="d-flex align-items-center mb-3">
                            <div class="rating-stars">
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star"></i>
                                <i class="fas fa-star-half-alt"></i>
                            </div>
                            <span class="ms-2">3.5/5 (423 reviews)</span>
                        </div>
                        <!-- 特色菜品 -->
                        <div class="mb-4">
                            <h6 class="text-muted">Specialty Dishes:</h6>
                            <ul class="specialty-list">
                                <li>Signature pork belly</li>
                                <li>White shrimp</li>
                                <li>Beef roll</li>
                            </ul>
                        </div>
                        <!-- 微型地图 -->
                        <div class="map-container" style="position: relative; border-radius: 8px; overflow: hidden; margin: 15px 0;">
                            <img src="images/Feikaowurao.png" 
                                 alt="餐厅周边地图"
                                 style="width: 100%;
                                        height: auto;
                                        max-width: 480px;
                                        border: 1px solid #eee;
                                        border-radius: 8px;
                                        box-shadow: 0 2px 4px rgba(0,0,0,0.05);">
                            <!-- 地图标注层 -->
                            <div style="position: absolute; 
                                        top: 15%; 
                                        left: 10%;
                                        pointer-events: none;">
                                <div class="map-marker" style="background: rgba(255,165,0,0.9); 
                                                              color: white;
                                                              padding: 8px 12px;
                                                              border-radius: 20px;
                                                              font-size: 0.9rem;
                                                              margin-bottom: 8px;">
                                    🏮 Korean barbecue
                                </div>
                                <div class="map-marker" style="background: rgba(106,90,205,0.9); 
                                                              color: white;
                                                              padding: 6px 10px;
                                                              border-radius: 15px;
                                                              font-size: 0.8rem;">
                                    📍 新竹路7号51栋105
                                </div>
                            </div>
                        </div>
                        <!-- 组 -->
                        <div class="d-flex justify-content-between">
                            <button class="btn btn-outline-dark btn-sm">
                                <i class="fas fa-info"></i> Details
                            </button>
                            <button class="btn btn-primary btn-sm" 
                                    data-bs-toggle="modal" 
                                    data-bs-target="#reviewModal">
                                <i class="fas fa-pen"></i> Write Review
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- 可复用的卡片区块（复制修改内容即可） -->
            <!-- 更多餐厅卡片... -->
        </div>
    </div>

   <!-- ... 原有 HTML 结构不变 ... -->

<!-- 评价模态框（确保表单有 id="reviewForm" 和隐藏的 restaurantId 输入） -->
<div class="modal fade" id="reviewModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title">Share Your Experience</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>
            <div class="modal-body">
                <form id="reviewForm">
                    <input type="hidden" id="restaurantId"> <!-- 隐藏输入存储餐厅 ID -->
                    <div class="mb-3">
                        <label>Rating</label>
                        <div class="rating-stars">
                            <i class="far fa-star" data-rating="1"></i>
                            <i class="far fa-star" data-rating="2"></i>
                            <i class="far fa-star" data-rating="3"></i>
                            <i class="far fa-star" data-rating="4"></i>
                            <i class="far fa-star" data-rating="5"></i>
                        </div>
                    </div>
                    <div class="mb-3">
                        <textarea class="form-control" id="reviewComment" rows="3" placeholder="Share your experience..."></textarea>
                    </div>
                    <button type="submit" class="btn btn-primary">Submit Review</button>
                </form>
            </div>
        </div>
    </div>
</div>

<script>
    // 星级评分交互（保持不变）
    document.querySelectorAll('.rating-stars i').forEach(star => {
        star.addEventListener('click', function () {
            const rating = parseInt(this.dataset.rating);
            const stars = this.parentElement.children;
            Array.from(stars).forEach((s, index) => {
                s.className = index < rating ? 'fas fa-star' : 'far fa-star';
            });
        });
    });

    // 动态设置餐厅 ID（关键修改：每个 "Write Review" 按钮绑定对应餐厅 ID）
    document.querySelectorAll('[data-bs-target="#reviewModal"]').forEach((btn, index) => {
        btn.addEventListener('click', () => {
            document.getElementById('restaurantId').value = index + 1; // 餐厅 ID 为 1/2/3（对应卡片顺序）
        });
    });

    // 表单提交处理（关键修改）
    document.getElementById('reviewForm').addEventListener('submit', function (e) {
        e.preventDefault();

        // 获取评论数据（限定在模态框内，避免与其他页面元素冲突）
        const restaurantId = parseInt(document.getElementById('restaurantId').value);
        const rating = document.querySelectorAll('#reviewModal .rating-stars .fa-star').length; // 仅获取模态框内的评分
        const comment = document.getElementById('reviewComment').value.trim();
        const timestamp = new Date().getTime();

        // 表单验证
        if (rating === 0 || comment === '') {
            alert('请选择评分并填写评论内容！');
            return;
        }

        // 存储到 localStorage（键格式：reviews_餐厅ID）
        const key = `reviews_${restaurantId}`;
        const existingReviews = JSON.parse(localStorage.getItem(key)) || [];
        existingReviews.push({ rating, comment, timestamp });
        localStorage.setItem(key, JSON.stringify(existingReviews));

        // 清空表单并关闭模态框
        document.getElementById('reviewComment').value = '';
        document.querySelectorAll('#reviewModal .rating-stars i').forEach(star => {
            star.className = 'far fa-star'; // 重置评分星星
        });
        const modal = bootstrap.Modal.getInstance(document.getElementById('reviewModal'));
        modal.hide();

        // 跳转到 Review.html 并携带餐厅 ID（通过 URL 哈希传递）
        window.location.href = `Review.html#restaurant=${restaurantId}`;
    });
</script>
<!-- ... 原有 HTML 结构不变 ... -->

    <!-- stuff -->
    <!-- our own footer goes here-->
    <nav id="footerPlaceholder"></nav>

    <!-- Your own JavaScript functions go here    -->
    <script src="./scripts/skeleton.js"></script>
    <script src="scripts/authentication.js" defer></script>
    <script src="./scripts/script.js"></script>

    <!-- <script src="./scripts/script.js"></script> -->

</body>

</html>    
